<template>
  <div class="login-wrap">
    <div class="ms-login">
      <div class="ms-title">
        <div class="title_left">用户登录</div>
      </div>
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="80px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="account">
          <el-input v-model.number="ruleForm.account" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">Submit</el-button>
          <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
        </el-form-item>
      </el-form>
      <!-- <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="ms-content"
      >
        <el-form-item prop="name" class="form_container">
          <img class="topDing" src="../assets/img/login/user.png" alt="" />
          <el-input v-model="ruleForm.name" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item prop="pwd" class="form_container">
          <img class="topDing" src="../assets/img/login/password.png" alt="" />
          <el-input
            v-model="ruleForm.pwd"
            type="password"
            placeholder="请输入密码"
            autocomplete="off"
          />
        </el-form-item>

        <el-form-item>
    
          

          <div class="login-btn">
            <el-button type="primary" @click="submitForm(ruleFormRef)"
              >登录</el-button
            >
          </div>
          用户名：bosenAdmin 密码：123456
          
        </el-form-item>
      </el-form> -->

    </div>
  </div>
</template>
  
<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance } from "element-plus";
import { Login, getAccessToken } from "../request/api";
import { useRouter } from "vue-router";
const router = useRouter(); //-->$router


import userMainStore from "../store/modules/app";
const mainStore = userMainStore();
mainStore.SET_LOCALE("zhCn");//en  语言切换

const ruleFormRef = ref<FormInstance>();

const checkName = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error("请输入用户名"));
  } else {
    callback(); //注意：callback(),这个回调参数一定要放在最后写上，不写的话，他就会一直验证中，即使你输入的内容是符合规则的。
  }
};

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    callback();
  }
};




const ruleForm = reactive({
  account: "",
  password: "",
  token: ''
});

const rules = reactive({
  account: [{ validator: checkName, trigger: "blur" }],
  password: [{ validator: validatePass, trigger: "blur" }],
});

const submitForm = (formEl: FormInstance | undefined) => {
  console.log(formEl, "formEl===");

  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!-----------");
      getassess() //注意总体响应拦截code的定义的值

    } else {
      console.log("error submit!");
      return false;
    }
  });
};
const getassess = () => {


  const tokenParams = reactive({
    appid: 'w186833ac0e0b4e8ea',
    appserect: 'slYWQNMw96dVjbVG3tFXvRV91hyXxSYC'
  })

  getAccessToken(tokenParams).then((res) => {
    // console.log(res, 'res====');

    const { code, data } = res;
    if (code == 200) {

      let Authorization = data.token
      console.log(Authorization, 'Authorization===');

      // ruleForm.token = Authorization
      getLogin(Authorization)

    }
  })

}
interface itemListType {
  icon: string,
  index: string,
  title: string,
}

const getLogin = (Authorization: string) => {
  ruleForm.token = Authorization
  Login(ruleForm).then((res) => {
    console.log(res, "res====");
    const { code, data } = res;
    if (code == 200) {
      let itemsList: itemListType[] = []
      localStorage.setItem('loginInfo', JSON.stringify(data.info));
      if (data.info.type == 1) {

        itemsList =
          [
            // 教师端

            {
              icon: 'kechengguanli',
              index: 'curriculumManage',
              title: '课程管理'
            },
            {
              icon: 'mobanguanli',
              index: 'templateManage',
              title: '模板管理'
            },
            {
              icon: 'sucaiku',
              index: 'bgMusic',
              title: '音乐素材库',

            },
            {
              icon: 'zuoyeguanli',
              index: 'jobManage',
              title: '作业管理'
            },
          ]

      }
      if (data.info.type == 2) {
        itemsList =
          [

            // 学生端

            {
              icon: 'zuoyeguanli',
              index: 'courseList',
              title: '课程列表'
            },

          ]

      }

      if (data.info.type == 0) {
        itemsList =
          [
            // 管理员端


            {
              icon: 'jiaoshi',
              index: 'teacherManage',
              title: '教师管理'
            },
            {
              icon: 'xuesheng',
              index: 'studentManage',
              title: '学生管理'
            },
            {
              icon: 'yuanxi',
              index: 'facultyManage',
              title: '院系管理'
            },

          ]

      }
      console.log(itemsList, 'itemsList=====');
      console.log(itemsList[0], 'itemsList[0]');

      localStorage.setItem('itemsList', JSON.stringify(itemsList))


      mainStore.setToken(Authorization)
      localStorage.setItem("Authorization", Authorization);
      router.push('/' + itemsList[0].index);
      console.log('/' + itemsList[0].index, '路径');

    } else {
      // rLoading.close();
    }
    console.log("====================================");
    console.log(res);
    console.log("====================================");

  })
}


const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>


<style scoped lang="scss">
.login-wrap {
  /* position: relative; */
  width: 100%;
  height: 100%;
  background: 100% url("../assets/img/login-bg.jpg") no-repeat #a8a7a3;
  background-size: cover;
}

.ms-title {
  width: 100%;
  line-height: 50px;
  font-size: 20px;
  color: #fff;
  /* border: 2px solid #065c9a; */
  border-bottom: none;
  padding: 15px 30px 0;
  overflow: hidden;
  // box-sizing: border-box;
}

.title_left {
  float: left;
}

.title_right {
  float: right;
}

.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 400px;
  margin: -190px 0 0 -175px;
  background: rgba(255, 255, 255, 0.4);
  overflow: hidden;
  padding: 0 30px 0 0;
}

.ms-content {
  /* border: 2px solid #065c9a; */
  border-top: none;
  padding: 10px 30px 30px;
}

.login-btn {
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}

.login-tips {
  font-size: 12px;
  line-height: 30px;
  color: #fff;
}
</style>
<style lang="scss" scoped>
.titlePosi {
  padding-top: 7%;

  .titleQi {
    text-align: center;
    // font-size: 53px;
    font-family: 缁忓吀缁嗗渾绠€;
    font-weight: 400;
    background: linear-gradient(to right, #009df4 0%, #00e9d0 100%);
    -webkit-background-clip: text;
    color: transparent;
  }

  .titleQiEn {
    text-align: center;
    font-size: 17px;
    font-family: FZLTXHJW;
    font-weight: normal;
    background: linear-gradient(to right, #009df4 0%, #00e9d0 100%);
    -webkit-background-clip: text;
    color: transparent;
  }
}

.jiaoBiao1 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 36px;
  height: 36px;

  .jbImg1 {
    width: 100%;
    transform: rotate(270deg);
  }
}

.jiaoBiao2 {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 36px;
  height: 36px;

  .jbImg1 {
    width: 100%;
  }
}

.jiaoBiao3 {
  position: absolute;

  width: 36px;
  height: 36px;
  left: 0px;
  bottom: 0px;

  .jbImg1 {
    width: 100%;
    transform: rotate(180deg);
  }
}

.jiaoBiao4 {
  position: absolute;

  width: 36px;
  height: 36px;
  right: 0px;
  bottom: 0px;

  .jbImg1 {
    width: 100%;
    transform: rotate(90deg);
  }
}

.topDing {
  position: absolute;
  left: 12px;
  top: 10px;
  z-index: 22;
  width: 17px;
}
</style> 
  